<template>
  <div 
    class="scroll-element" 
    :class="{ 'animate-in': isVisible }"
    :style="{ '--delay': delay + 's' }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ScrollAnimation',
  props: {
    delay: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isVisible: false
    }
  },
  mounted() {
    this.observeElement()
  },
  methods: {
    observeElement() {
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              setTimeout(() => {
                this.isVisible = true
              }, this.delay * 1000)
            }
          })
        },
        {
          threshold: 0.1,
          rootMargin: '0px 0px -50px 0px'
        }
      )
      
      observer.observe(this.$el)
    }
  }
}
</script>

<style scoped>
.scroll-element {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--delay);
}

.scroll-element.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 不同的动画效果 */
.scroll-element.fade-in {
  transform: translateY(0);
}

.scroll-element.slide-left {
  transform: translateX(-30px);
}

.scroll-element.slide-right {
  transform: translateX(30px);
}

.scroll-element.scale-up {
  transform: scale(0.9);
}

.scroll-element.animate-in.fade-in {
  transform: translateY(0);
}

.scroll-element.animate-in.slide-left {
  transform: translateX(0);
}

.scroll-element.animate-in.slide-right {
  transform: translateX(0);
}

.scroll-element.animate-in.scale-up {
  transform: scale(1);
}
</style>
